import React, { useState, useEffect } from 'react'
import { Link, useParams } from 'react-router-dom'
import { Button, Row, Col, Image, Rate, InputNumber, message } from 'antd'
import { CaretLeftOutlined } from '@ant-design/icons'
import { getProduct } from '@/api/product'
import { addProductToCart } from '@/api/cart'
import { showLoading, hideLoading } from '@/register/globalFun'
import { typeProduct } from '@/types/product'
import './index.scss'

const Product = () => {
  const { id } = useParams<{id: string}>()
  const [qty, setQty] = useState<number>(0)
  const [product, setProduct] = useState<typeProduct>()

  useEffect(() => {
    loadProduct()
  }, [])

  const loadProduct = async() => {
    showLoading()
    try {
      const res = await getProduct(id)

      setProduct(res.data)
    } catch (err) {
      console.log(err)
    }
    hideLoading()
  }

  /**
   * 添加到购物车事件
   */
  const addCart = async() => {
    if (product && qty > 0) {
      try {
        await addProductToCart({
          productId: product._id,
          qty
        })
        message.success('已添加到购物车')
        setQty(0)
      } catch (err) {
        console.log(err)
        message.error('添加失败')
      }
    }
  }

  return product && product._id
    ? (
      <div className="product-detail">
        <Link to={'/'}>
          <Button
            icon={<CaretLeftOutlined />}
            size="large"
            type="primary"
          >
          返回主页
          </Button>
        </Link>

        <Row
          align="top"
          className="container"
          gutter={[30, 0]}
        >
          <Col span={12}>
            <Image
              className="product-img"
              height="400px"
              src={product.image}
            />
          </Col>
          <Col
            className="content"
            span={12}
          >
            <div className="item">
              <h3>{product.name}</h3>
            </div>
            <div className="item price">
              <span>价格:&emsp;</span>
              <h1>￥{product.price}</h1>
            </div>
            <div className="item border">
              <span>评价:&emsp;</span>
              <Rate
                allowHalf
                defaultValue={product.rating}
                disabled
              />
              <span style={{ marginLeft: '5px' }}>{product.numReviews}条评价</span>
            </div>
            <div className="item border">
              <span>描述:&emsp;</span>
              <span>{product.description}</span>
            </div>
            <div className="item border">
              <div>库存:&emsp;<strong>{product.countInStock}</strong></div>
            </div>
            <div className="item">
              <span>数量:&emsp;</span>
              <InputNumber
                disabled={product.countInStock === 0}
                max={product.countInStock}
                min={0}
                onChange={(e) => { setQty(e) }}
                value={qty}
              />
            </div>
            <div className="item">
              <Button
                className="add-cart-btn"
                disabled={product.countInStock === 0}
                onClick={addCart}
                size="large"
                type="primary"
              >
                加入购物车
              </Button>
            </div>
          </Col>
        </Row>
      </div>
    )
    : null
}

export default Product
